import { dayjs } from "element-plus";

export const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const start = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
      const end = dayjs().format('YYYY-MM-DD')
      return [start, end]
    },
  },
  {
    text: '近一月',
    value: () => {
      const start = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
      const end = dayjs().format('YYYY-MM-DD')
      return [start, end]
    },
  },
  {
    text: '近半年',
    value: () => {
      const start = dayjs().subtract(187, 'day').format('YYYY-MM-DD')
      const end = dayjs().format('YYYY-MM-DD')
      return [start, end]
    },
  },
]

import { ref } from "vue";

export const line_option = ref({
  title: {
    text: "浏览量-趋势图",
    textStyle: {
      color: "#000",
      fontSize: 20,
    },
    left: "center",
    subtextStyle: {
      color: "#000",
      fontSize: 14,
      fontWeight: "normal",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
    formatter: function (params) {
      return `${params[0].name}日：${params[0].data}<br>【注】：滚动鼠标可缩放该图`;
    },
  },
  legend: {
    orient: "horizontal", //布局方式：  horizontal/vertical
    x: "900", // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
    y: "top", //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
    textStyle: {
      // 图例文字大小颜色
      fontSize: 18,
      color: "#000",
    },
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "#ccc", // 图例边框颜色
    borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5, // 图例内边距，单位px，默认各方向内边距为5，或数组形式分别设定上右下左边距，同css
    itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20, // 图例图形宽度
    itemHeight: 14,
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "12%",
    containLabel: true,
  },
  xAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "category",
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "value",
    },
  ],
  dataZoom: [
    {
      show: true,
      textStyle: {
        color: "#fff", //滚动条两边字体样式
        fontSize: "20px",
      },
      xAxisIndex: 0,
      filterMode: "none",
      startValue: 34,
      endValue: 44,
    },
  ],
  series: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      label: {
        show: true,
        color: "#000",
      },
      data: [],
      type: "line",
    },
  ],
});

export const line_option2 = ref({
  title: {
    text: "访问数-趋势图",
    textStyle: {
      color: "#000",
      fontSize: 20,
    },
    left: "center",
    subtextStyle: {
      color: "#000",
      fontSize: 14,
      fontWeight: "normal",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
    formatter: function (params) {
      return `${params[0].name}日：${params[0].data}<br>【注】：滚动鼠标可缩放该图`;
    },
  },
  legend: {
    orient: "horizontal", //布局方式：  horizontal/vertical
    x: "900", // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
    y: "top", //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
    textStyle: {
      // 图例文字大小颜色
      fontSize: 18,
      color: "#000",
    },
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "#ccc", // 图例边框颜色
    borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5, // 图例内边距，单位px，默认各方向内边距为5，或数组形式分别设定上右下左边距，同css
    itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20, // 图例图形宽度
    itemHeight: 14,
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "12%",
    containLabel: true,
  },
  xAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "category",
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "value",
    },
  ],
  dataZoom: [
    {
      show: true,
      textStyle: {
        color: "#fff", //滚动条两边字体样式
        fontSize: "20px",
      },
      xAxisIndex: 0,
      filterMode: "none",
      startValue: 34,
      endValue: 44,
    },
  ],
  series: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      label: {
        show: true,
        color: "#000",
      },
      data: [],
      type: "line",
    },
  ],
});

export const map_option_china = ref({
  // 提示浮窗样式
  tooltip: {
    show: true,
    trigger: "item",
    formatter: function (params) {
      return `${params.seriesName}: ${params.data["name"]}
        ${params.data["value"]}`;
    },
    alwaysShowContent: false,
    backgroundColor: "#0C121C",
    borderColor: "rgba(0, 0, 0, 0.16);",
    hideDelay: 100,
    triggerOn: "mousemove",
    enterable: true,
    textStyle: {
      color: "#DADADA",
      fontSize: "16",
      width: 20,
      height: 30,
      overflow: "break",
    },
    showDelay: 100,
  },
  dataRange: {
    //左下角的颜色块。start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值
    x: "50",
    y: "500",
    textStyle: {
      color: "#333",
    },
    splitList: [
      { start: 1000, label: "> 1000  极高", color: "#b80909" },
      {
        start: 500,
        end: 1000,
        label: "500 - 1000  高",
        color: "#e64546",
        // color: "#000",
      },
      {
        start: 200,
        end: 500,
        label: "200 - 500  中",
        color: "#f57567",
      },
      {
        start: 100,
        end: 200,
        label: "100 - 200  低",
        color: "#ff9985",
      },
      { start: 0, end: 100, label: "0 -100或无数据", color: "#ffe5db" },
    ],
  },
  series: [
    {
      name: "数量",
      type: "map",
      geoIndex: 0,
      data: [], //数据
    },
  ],
  // 地图配置
  geo: {
    map: "china",
    label: {
      // 通常状态下的样式
      normal: {
        show: true,
        textStyle: {
          color: "#409eff",
        },
      },
      // 鼠标放上去的样式
      emphasis: {
        textStyle: {
          color: "#fff",
        },
      },
    },
    // 地图区域的样式设置
    itemStyle: {
      normal: {
        borderColor: "rgba(5, 5, 5, 0.3)",
        backgroundColor: "red",
        borderWidth: 1,
        areaColor: {
          type: "radial",
          x: 0.5,
          y: 0.5,
          r: 0.8,
          colorStops: [
            {
              offset: 0,
              color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        shadowColor: "rgba(128, 217, 248, 0.5)",
        shadowOffsetX: -2,
        shadowOffsetY: 2,
        shadowBlur: 10,
      },
      // 鼠标放上去高亮的样式
      emphasis: {
        areaColor: "#409eff",
        borderWidth: 0,
      },
    },
  },
});

export const map_option_world = ref({
  // 提示浮窗样式
  tooltip: {
    show: true,
    trigger: "item",
    formatter: function (params) {
      return `${params.seriesName}: ${params.data["name"]}
        ${params.data["value"]}`;
    },
    alwaysShowContent: false,
    backgroundColor: "#0C121C",
    borderColor: "rgba(0, 0, 0, 0.16);",
    hideDelay: 100,
    triggerOn: "mousemove",
    enterable: true,
    textStyle: {
      color: "#DADADA",
      fontSize: "16",
      width: 20,
      height: 30,
      overflow: "break",
    },
    showDelay: 100,
  },
  // visualMap: {
  //   type:
  // },
  dataRange: {
    //左下角的颜色块。start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值
    x: "100",
    y: "500",
    textStyle: {
      color: "#333",
    },
    splitList: [
      { start: 1000, label: "> 1000  极高", color: "#b80909" },
      {
        start: 500,
        end: 1000,
        label: "500 - 1000  高",
        color: "#e64546",
        // color: "#000",
      },
      {
        start: 200,
        end: 500,
        label: "200 - 500  中",
        color: "#f57567",
      },
      {
        start: 100,
        end: 200,
        label: "100 - 200  低",
        color: "#ff9985",
      },
      { start: 0, end: 100, label: "0 -100或无数据", color: "#ffe5db" },
    ],
  },
  series: [
    {
      name: "数量",
      type: "map",
      geoIndex: 0,
      data: [], //数据
    },
  ],

  // 地图配置
  geo: {
    map: "world",
    label: {
      // 通常状态下的样式
      // normal: {
      //   show: true,
      //   textStyle: {
      //     color: "#fff",
      //   },
      // },
      // 鼠标放上去的样式
      emphasis: {
        textStyle: {
          color: "#fff",
        },
      },
    },
    // 地图区域的样式设置
    itemStyle: {
      normal: {
        borderColor: "rgba(5, 5, 5, 0.3)",
        backgroundColor: "red",
        borderWidth: 1,
        areaColor: {
          type: "radial",
          x: 0.5,
          y: 0.5,
          r: 0.8,
          colorStops: [
            {
              offset: 0,
              color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        shadowColor: "rgba(128, 217, 248, 0.5)",
        shadowOffsetX: -2,
        shadowOffsetY: 2,
        shadowBlur: 10,
      },
      // 鼠标放上去高亮的样式
      emphasis: {
        areaColor: "#409eff",
        borderWidth: 0,
      },
    },
  },
});